<template>
  <div class="container">
    <template v-if="getShowBuyCard">
      <get-phone-info v-if="isGetPhoneInfo" @updatePhoneInfo="initMemberInfo"></get-phone-info>
    </template>
    <div class="page-head" :style="{paddingTop: statusBarHeight + 'px;', backgroundColor: enterpriseConfig.shopTopTitleBackground || '#ffe200'}">
      <div class="page-head-row">
        <icon class="iconfont icon-arrow-right" @click="topBack"></icon>
        <div class="page-title">{{enterpriseConfig.shopTopTitle || '店长申请'}}</div>
      </div>
    </div>
    <img class="bc-img width-375" :style="{height: imgHeight + 'px'}" v-if="fileSpace" :src="shopPosterUrl ? shopPosterUrl : fileSpace + '/images/apply-shopowner.png'" alt="">
    <div class="apply-wrap">
      <div class="apply-btn" @click="handleApply">{{applyStatus !== 0 ? '立即申请' : '审核中'}}</div>
    </div>
    <div class="div-pop" catchtouchmove="true" v-if="showDialog">
      <div class="apply-dialog">
        <div class="title-bc"></div>
        <div class="apply-dialog-title">申请信息</div>
        <div class="shopowner-info">
          <img class="shophead" v-if="memberInfo.avatar" :src="memberInfo.avatar" alt="">
          <div class="mar-t-12">{{memberInfo.nickname}}</div>
          <div class="mar-t-10">{{memberInfo.phone}}</div>
        </div>
        <!-- <div class="border"></div> -->
        <!-- <div class="input-wrap">
          <div class="input-box">
            <input type="text" placeholder="请输入邀请码(选填)" placeholder-style="color:#C7B233">
          </div>
          <div class="input-box">
            <input v-model="params.wechatNo" type="text" placeholder="请输入微信号(选填)" placeholder-style="color:#C7B233">
          </div>
        </div>
        <div class="tip-box">注：微信号用于您直播间开播和查询收入使用除此之外 系统不会对外透露，成为主播后无法修改微信号。</div> -->
        <div class="flex bottom-btn">
          <div class="flex-item cancel-btn" @click="showDialog = false">取消</div>
          <div class="flex-item submit-btn" @click="submitApply">确认申请</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GetPhoneInfo from '@/components/GetPhoneInfo'
import { getMemberInfo } from '@/api/home'
import { getByMemberId, saveByWeChatNo, getByEnterpriseId } from '@/api/personal'
import { listEnterpriseMessageConfig } from '@/api/common'
export default {
  components: { GetPhoneInfo },
  data() {
    return {
      showDialog: false,
      isGetPhoneInfo: false,
      statusBarHeight: 0,
      applyStatus: null,
      memberInfo: {},
      imgHeight: 0,
      messageIdsApplyShop: [],
      params: {
        enterpriseId: '',
        memberId: '',
        applyId: ''
      },
      shopPosterUrl: '',
      enterpriseConfig: {}
    }
  },
  onLoad(params) {
    if (params) {
      if (params.enterpriseConfig) {
        this.enterpriseConfig = JSON.parse(params.enterpriseConfig)
      }
      this.shopPosterUrl = this.enterpriseConfig.shopPosterUrl
    }
  },
  onShow() {
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight']
    this.$pt.getImageInfo({
      src: this.fileSpace + '/images/apply-shopowner.png',
      success: images => {
        this.imgHeight = images.height / 2
      }
    })
    this.getMemberInfo()
    this.getByMemberId()
    this.messageApplyShop()
  },
  methods: {
    getByEnterpriseId() {
      getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      }).catch({})
    },
    messageApplyShop() {
      this.messageIdsApplyShop = []
      const dataArr = ['1701', '1702']
      let dataStr = dataArr.toString()
      listEnterpriseMessageConfig({
        memberId: this.getCustomerId,
        ascriptionTypes: dataStr
      })
        .then((response) => {
          if (response.isError) return
          response.data.forEach((item) => {
            if (item.miniMadeId) {
              this.messageIdsApplyShop.push(item.miniMadeId)
            }
          })
        })
        .catch(() => { })
    },
    applyShop() {
      let that = this
      let rejectArr = []
      if (!that.$pt.getStorageSync('phone') && that.getShowBuyCard !== false) {
        that.isGetPhoneInfo = true
      } else {
        that.isGetPhoneInfo = false
        that.showDialog = true
      }
      this.$pt.requestSubscribeMessage({
        tmplIds: that.messageIdsApplyShop,
        success: function(res) {
          // 成功
          Object.keys(res).forEach(key => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            that.messageIdsApplyShop = rejectArr
            that.$utils.showToast({title: '请允许消息通知！'})
          } else {
            if (!that.$pt.getStorageSync('phone') && that.getShowBuyCard !== false) {
              that.isGetPhoneInfo = true
            } else {
              that.isGetPhoneInfo = false
              that.showDialog = true
            }
          }
        },
        fail(err) {
          // 失败
          that.$utils.showToast({title: '消息订阅失败，' + err.errCode})
          console.error(err)
        }
      })
    },
    topBack() {
      this.$pt.navigateBack({ delta: -1 })
    },
    getMemberInfo() {
      getMemberInfo(this.getCustomerId).then(response => {
        if (response.isError) return
        this.memberInfo = response.data
      }).catch(() => {
      })
    },
    handleApply() {
      if (this.applyStatus === 0) return // 如果在审核中则不进行操作
      this.applyShop()
    },
    initMemberInfo() {
      this.getMemberInfo()
      this.showDialog = true
    },
    getByMemberId() {
      // 查看申请店主状态
      let params = {
        enterpriseId: this.getEnterpriseId,
        memberId: this.getCustomerId
      }
      getByMemberId(params).then(response => {
        if (response.isError) return
        if (!response.data) {
          this.applyStatus = null
        } else {
          this.applyId = response.data.applyId
          this.applyStatus = response.data.status
          if (this.applyStatus === 1) {
            setTimeout(() => {
              this.$pt.navigateTo({ url: '/pages/home/apply-for/main?veekrayStatus=1&shopowner=1' })
            }, 1500)
          }
        }
      }).catch({
      })
    },
    submitApply() {
      // 提交店长申请
      console.log(this.memberInfo.nature)
      this.params.memberId = this.getCustomerId
      this.params.enterpriseId = this.getEnterpriseId
      this.params.applyId = this.applyId
      saveByWeChatNo(this.params).then(response => {
        if (response.isError) return
        this.showDialog = false
        this.$utils.showToast({title: '申请成功'})
        // 申请提交后，申请按钮状态需要改变
        this.getByMemberId()
      }).catch({
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 40px;
  background-size: 100%;
  .page-head{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    .page-head-row{
      height: 44px;
      line-height: 44px;
      padding-left: 15px;
      display: flex;
      align-items: center;
      .iconfont{      
        font-size: 20px;
        font-weight: bold;
        transform:rotate(180deg);
      }
    }
    .page-title{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
  }
  .apply-wrap{
    position: fixed;
    bottom: 13px;
    left: 0;
    width: 100%;
    .apply-btn{
      width: 310px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      background-color: rgba(88, 120, 255, 1);
      color: white;
      font-weight: bold;
      font-size: 18px;
      box-shadow: 0 5px 0 0px rgba(69, 91, 253, 1);
      border-radius: 23px;
      margin: 0 auto;
    }
  }
  .apply-dialog{
    background-color: white;
    width: 274px;
    border-radius: 8px;
    overflow: hidden;
    // height: 400px;
    // height: 265px;
    height: 235px;
    line-height: 1;
    position: relative;
    // background: radial-gradient(circle at 0px 200px, transparent 10px, #ffffff 0) top left / 50% no-repeat,
    //     radial-gradient(circle at 137px 200px, transparent 10px, #ffffff 0) bottom right / 50% no-repeat;
    .title-bc{
      margin-top: -10px;
      height: 50px;
      background-color: #FEDC16;
      border-radius: 10%;
    }
    .apply-dialog-title{
      margin-top: -40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #343434;
      font-size: 15px;
      font-weight: bold;
    }
    .shopowner-info{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 17px 0;
      width: 250px;
      border-radius: 5px;
      background-color: #F5F5F5;
      margin: -2px auto 0;
      .shophead{
        height: 54px;
        width: 54px;
        border-radius: 50%;
      }
    }
    .border{
      border-top: 0.5px dashed #E5E5E5;
      width: 235px;
      height: 0.5px;
      margin: 20px auto;
    }
    .input-wrap{
      .input-box{
        margin: 0 auto;
        width: 244px;
        height: 42px;
        border-radius: 6px;
        background-color: #FFFBDF;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        box-sizing: border-box;
        &:last-child{
          margin: 11px auto 0;
        }
        input{
          text-align: center;
          font-size: 13px;
          // color: #C7B233;
        }
      }
    }
    .tip-box{
      color: #9A9A9A;
      font-size: 10px;
      margin: 8px 15px 0;
      line-height: 15px;
    }
    .bottom-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      .cancel-btn{
        background-color: #F5F5F5;
        color: #343434;
        font-size: 16px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }
      .submit-btn{
        background-color: #FEDC16;
        color: #343434;
        font-size: 16px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }
    }
  }
}
</style>
